<template>
	<view>
		<uNavbar title="绑定手机号"></uNavbar>
<!-- 		<view class="custom"></view>
		<view class="navbar_box">
			<u-icon class="zjt" v-if="!noPhpne" name="arrow-left" color="#ffffff" size="20" @click="goBack"></u-icon>
			<text>绑定手机号</text>
		</view> -->
		<view class="mask"></view>
		<view class="logos flex_ZC">
			<view class="modular_box">
				<view class="binding flex_dq" style="margin-top: 30px;">
					<u-input type="number" placeholder="请输入手机号" maxlength="32" placeholderStyle="color: #c0c4cc90" v-model.trim="phone"></u-input>
				</view>
				<view class="binding flex_dq" style="margin-top: 30px;">
					<u-input placeholder="请输入验证码" maxlength="6" placeholderStyle="color: #c0c4cc90" v-model.trim="validateCode">
						<template slot="suffix">
							<u-code ref="uCode" @change="codeChange" seconds="60" changeText="X秒重新获取"></u-code>
							<u-button @tap="varify2()" :text="tips" type="success" size="mini"></u-button>
						</template>
					</u-input>
				</view>
				<view class="log_out flex_c"  :class="check?'bgTaggle':''" @click="isComplete"><text>确认</text></view>
			</view>
		</view>
		<view v-if="isyzm">
			<web-view :fullscreen="false"  src="/static/local.html" @message="callback2">测试</web-view>
		</view>
		<view class="switch ">
			<text @click="changeAccount">切换账号</text>
		</view>
	</view>
</template>

<script>
	import {bindingPhone,sendSms} from "../../api/login.js"
	export default {
		data() {
			return {
				tips: '',
				phone: '', //手机号
				validateCode: '', //验证码
				noPhpne:true,
				check: false, //监听用户是否输入内容
				isyzm:false,
				randstr:"",
				ticket:"",
			}
		},
		onLoad(e) {
		console.log(e);
		this.noPhpne = e.noPhpne
		},
		// 监听事件
		watch: {
			phone(val) {
				if (uni.$u.test.mobile(this.phone)) {
					this.check = true
				} else {
					this.check = false
				}
			},
			validateCode(val) {
				if (!uni.$u.test.isEmpty(this.validateCode)) {
					this.check = true
				} else {
					this.check = false
				}
			},
		},
		methods: {
			callback2(res){
				let that=this
				that.isyzm=false
				let r = res.detail.data[0].res;
				if (r.ret === 0) {
					that.randstr=r.randstr
					that.ticket=r.ticket
					that.getCode()
					console.log("成功")
					//成功，传递数据给后台进行验证
					// 这里后台会给一个借口,把后台需要的参数传过去
					
				} else {
					console.log("验证失败")
					// 提示用户完成验证
				}
				         console.log(1111111111,r);
			},
			callback(res) {
				// 用户操作验证码或者关闭刷新腾讯返回的内容 
				let that = this
				if (res.ret === 0) {
					that.randstr=res.randstr
					that.ticket=res.ticket
					that.getCode()
					console.log("成功")
					//成功，传递数据给后台进行验证
					// 这里后台会给一个借口,把后台需要的参数传过去
					
				} else {
					console.log("验证失败")
					// 提示用户完成验证
				}
			},
			varify2(){
				// #ifdef APP
					this.isyzm=true
				// #endif
				// #ifdef H5
					this.varify()
				// #endif
			},
			varify() {
				let appid = '197018098'; // 腾讯云控制台中对应这个项目的 appid
				//生成一个滑块验证码对象
				let captcha = new TencentCaptcha(appid, this.callback);
				// 滑块显示
				captcha.show();
			
			},
			codeChange(text) {
				this.tips = text;
			},
			// 验证码
			getCode() {
				let that = this;
				let data = {
					phone:that.phone,
					scene:'register',
					randstr:that.randstr,
					ticket:that.ticket
				}
				sendSms(data).then(res => {
					console.log(res);
					if (res.code == 1) {
						uni.$u.toast(res.msg);
						if (that.$refs.uCode.canGetCode) {
							that.$refs.uCode.start();
						}
					}
				})
			},
			// 完成
			isComplete() {
				if (!uni.$u.test.mobile(this.phone)) {
					uni.$u.toast('请输入您的手机号');
					return;
				}
				if (!uni.$u.test.code(this.validateCode, 6)) {
					uni.$u.toast('验证码错误');
					return;
				}
				let data = {
					phone: this.phone,
					sms_code:this.validateCode
				}
				bindingPhone(data).then(res => {
					console.log(res);
					if (res.code == 1) {
						uni.$u.toast(res.msg);
						setTimeout(function() {
							uni.switchTab({
								url: '/pages/index/index'
							})
							}, 1500);
					} else {
						uni.$u.toast(res.msg);
					}
				})
			},
			// 清除数据缓存 去登录页
			changeAccount(){
				uni.removeStorageSync("token")
				uni.reLaunch({
					url:'/pages/login/login'
				})
			},
			// 返回上一页
			goBack() {
				uni.navigateBack({
					delta: 1
				})
			},

		},
	}
</script>

<style scoped>

	.mask {
		width: 100%;
		height: 200rpx;
	}

	.navbar_box {
		display: flex;
		align-items: center;
		position: fixed;
		top: 88rpx;
	}

	.zjt {
		width: 150rpx;
		padding-left: 30rpx;
	}

	.navbar_box>text {
		position: fixed;
		left: 50%;
		transform: translateX(-50%);
		font-size: 32rpx;
		color: #ffffff;
	}

	.modular_box {
		width: 92%;
		position: relative;
	}

	.active {
		color: #1E4BD8 !important;
	}

	.binding {
		width: 90%;
		margin: 0 auto;
		padding: 18rpx 0;
		border-radius: 60rpx;
		background: #FFFFFF;
		/* border-bottom: 1rpx solid #5a5a5a70; */
	}

	.martop {
		margin-top: 50rpx;
	}

	.log_out {
		width: 92%;
		margin: 90rpx auto 0;
	}
	.log_out>text {
		text-align: center;
		width: 100%;
		background: linear-gradient(274deg, #ab9880 , #d7c4aa );
		color: #ffffff90;
		font-size: 32rpx;
		padding: 20rpx 0;
		border-radius: 40rpx;
	}
	
	.bgTaggle>text {
		width: 100%;
		text-align: center;
		font-size: 32rpx;
		padding: 20rpx 0;
		border-radius: 40rpx;
		color: #ffffff !important;
		background: linear-gradient(274deg, #AB8E68, #D7BA93) !important;
	}

	.information {
		width: 80%;
		display: flex;
		align-items: center;
		visibility: inherit;
		margin: 70rpx auto 0;
	}

	.information_box {
		display: flex;
		align-items: flex-start;
		margin-left: 10rpx;
	}

	.information_box>text {
		color: #A6A5AF;
		font-size: 24rpx;
	}

	.information_box>text:nth-child(2n) {
		color: #FF2CDF !important;
	}

	.zhengce>image {
		width: 32rpx;
		height: 32rpx;
	}
	
	.modal-content {
		width: 80%;
		height: 720rpx;
		background-color: #E0DDDA;
		border-radius: 20rpx;
		z-index: 2;
		margin: 0 auto;
	}
	
	.modal-content scroll-view {
		max-height: 450rpx;
		box-sizing: border-box;
		margin-top: 20rpx;
	}
	
	.modal-content .title {
		font-weight: bold;
		text-align: center;
		line-height: 2;
		font-size: 32rpx;
		padding: 20rpx 20rpx 0;
		color: #ffffff;
	}
	
	.agreement-txt {
		width: 92%;
		margin: 0 auto;
		padding: 20rpx 10rpx;
		min-height: 450rpx;
		border-radius: 20rpx;
		font-size: 28rpx;
		color: #ffffff;
	}
	
	.close_btn {
		width: 92%;
		height: 68rpx;
		line-height: 68rpx;
		font-size: 28rpx;
		margin: 30rpx auto 0;
		background: linear-gradient(274deg, #AB8E68, #D7BA93) ;
		color: #ffffff;
		border-radius: 10rpx;
		text-align: center;
	}
	.switch{
		display: flex;
		align-items: center;
		justify-content: flex-end;
		width: 100%;
		margin-top: 30rpx;
		font-size: 24rpx;
		color: #A6A5AF;
	}
	.switch>text{
		margin-right:40rpx;
	}

	/deep/.uni-input-wrapper {
		color: #333333 !important;
	}

	/deep/.u-input--square {
		border: none !important;
		padding: 4rpx 20rpx !important;
	}

	/deep/.u-input--square {
		border: none !important;
		padding: 4rpx 20rpx !important;
	}


	/deep/.u-button--success {
		background: none !important;
		border: none !important;
		color: #A68A64 !important;
	}

	/deep/.u-button--mini {
		padding: 26rpx 30rpx !important;
		border-radius: 40rpx !important;
	}

	/deep/.u-button__text {
		font-size: 24rpx !important;
	}

	/deep/.uni-input-placeholder {
		position: absolute;
		top: auto !important;
		left: 10rpx !important;
		color: #999999 !important;
	}
</style>